<template>
  <div class="onekit-progress weui_progress onekit-progress"
       :style="onekitStyle"
       :class="onekitClass">
    <div class="weui_progress_bar"
         :style="{ height: strokeWidth + 'px', background: backgroundColor }">
      <div class="weui_progress_inner_bar"
           :style="{
          width: width + '%',
          borderRadius: borderRadius + 'px',
          height: strokeWidth + 'px',
          background: bgcolor,
        }"></div>
    </div>
    <a class="onekit_progress-count"
       v-if="showInfo"
       href="javascript:;"
       :style="{ fontSize: fontSize + 'px' }">
      {{ percent }}%
    </a>
    <a v-if="hasCancelButton"
       href="javascript:;"
       class="weui_progress_opr"
       @click="callEvent('weui-progress-cancel')">
      <i class="weui_icon_cancel"></i>
    </a>
  </div>
</template>

<script>
import weixin_behavior from "../../behaviors/weixin_behavior";
import onekit_behavior from "../../behaviors/onekit_behavior";
export default {
  name: "onekit-progress",
  mixins: [weixin_behavior, onekit_behavior],
  data () {
    return {
      hasCancelButton:false,
      bgcolor: this.color,
      bgActiveColor: this.activeColor,
      width: this.percent,
    };
  },
  props: {
    percent: {
      type: [Number, String],
      required: false,
      validator (value) {
        return value >= 0 && value <= 100;
      },
      default: 0,
    },
    showInfo: {
      type: [Boolean, String],
      default: false,
      requred: false,
    },
    borderRadius: {
      type: [Number, String],
      required: false,
      validator (value) {
        return value >= 0 && value <= 100;
      },
    },
    fontSize: {
      type: [Number, String],
      default: 16,
      required: false,
    },
    strokeWidth: {
      type: [Number, String],
      default: 6,
      required: false,
    },
    color: {
      type: String,
      default: "#09BB07",
      required: false,
    },
    activeColor: {
      type: String,
      default: "#09BB07",
      required: false,
    },
    backgroundColor: {
      type: String,
      default: "#EBEBEB",
      required: false,
    },
    active: {
      type: [Boolean, String],
      default: false,
      required: false,
    },
    "active-mode": {
      type: String,
       default: "backwards",
      required: false,
    },
    duration: {
      type: [Number, String],
      default: 30,
      required: false,
    }
  },
  computed: {},
  created () {
    this._ui_progress_animation();
  },
  methods: {
    callEvent (event) {
      this.$emit(event);
    },
    _ui_progress_animation () {
      if (this.active) {
        this.width = 0;
        const timer = setInterval(() => {
          this.width++;
          if (this.width >= this.percent) {
            this.$emit("Activeend");
            clearInterval(timer);
          }
        }, this.duration);
      }
    },
  },
  mounted () {
    if (this.activeColor !== '#09BB07') {
      this.bgcolor = this.activeColor
    }
  }
};
</script>

<style scpoed>
.onekit-rich-text {
  width: calc(var(--screen-width) * 700 / 750);
  padding: calc(var(--screen-width) * 25 / 750) 0;
}

.rich-text-wrp {
  padding: 0 calc(var(--screen-width) * 25 / 750);
  background-color: #fff;
}

.page-section {
  width: 100%;
  margin-bottom: calc(var(--screen-width) * 60 / 750);
}

.page-section:last-child {
  margin-bottom: 0;
}

.page-section-title {
  font-size: calc(var(--screen-width) * 28 / 750);
  color: #999999;
  margin-bottom: calc(var(--screen-width) * 10 / 750);
  padding-left: calc(var(--screen-width) * 30 / 750);
  padding-right: calc(var(--screen-width) * 30 / 750);
}
</style>
